<template>
  <div class="app-portal-body">
    <div class="app-portal-menucontent" v-if="app">
      <MenusTree
        :app-id="app?.group_id"
        :selected-id="defaultMid"
        @select="handleSelectMenu"
      />
    </div>
    <div class="app-portal-content">
      <div class="app-portal-cnt-hd">
        <template v-if="currentData">
          <div class="app-portal-hd-icon" :style="$menuUtils.getIconStyle(currentData)">
            <img v-if="$menuUtils.getIconImg(currentData)" :src="$menuUtils.getIconImg(currentData)"/>
            <template v-else-if="$menuUtils.getIconFont(currentData)">
              <JIcon :icon="$menuUtils.getIconFont(currentData)" />
            </template>
            <JIcon v-else :icon="DFT_ICONS.question" />
          </div>
          <div class="app-portal-title">{{ currentData.content_name }}</div>
          <div class="app-portal-mark" v-if="currentData.is_default_menu === 1">默认</div>
          <div class="app-portal-mark" v-if="currentData.is_white_menu === 1">白名单</div>
          <div class="app-portal-mark">{{ menuType(currentData.content_type) }}</div>
          <div class="app-portal-tools">
            <!-- <el-dropdown trigger="click" placement="bottom-start" size="small" @command="handleMenuCommand">
                <i class="app-portal-action fa fa-ellipsis-h" v-tippy="{ arrow: true }" content="更多"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="edit"><i class="el-icon-edit"></i>修改菜单</el-dropdown-item>
                    <el-dropdown-item command="remove"><i class="el-icon-delete"></i>删除菜单</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>-->
          </div>
          <div class="app-portal-paneltab" style="padding-right: 10px;">
            <div class="app-portal-mark">{{ menuType(currentData.content_type) }}资源</div>
            <div class="app-portal-mark" style="font-weight: bold;color: #333;">
              <template v-if="currentData.content_type === 'NORMAL'">
                {{ currentData?.form?.form_name }}
                <JIcon :icon="DFT_ICONS.braceLeft" class="ic-mini" />{{ viewLabel(currentData.view) }}<JIcon :icon="DFT_ICONS.braceRight" class="ic-mini" />
              </template>
              <template v-else-if="currentData.content_type === 'JZLPAGE'">
                {{ currentData?.page?.page_name }}
              </template>
            </div>
            <!--<el-button type="text" size="small">修改资源 <i class="el-icon-right"></i></el-button>-->
          </div>
        </template>
      </div>
      <div class="app-portal-cnt-bd">
        <template v-if="currentData">
          <datas
            v-if="currentData.content_type === 'NORMAL'"
            :form-id="currentData.form_id"
            :view-id="currentData.view_id"
          />
          <JzlPage
            v-else-if="currentData.content_type === 'JZLPAGE'"
            :page-id="currentData.page_id"
            :is-preview="true"
            :show-header="false"
          />
          <div v-else class="jzl-page jzl-page-preview jzl-page-web">
            <div class="common-error-tip">暂不支持预览</div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import _ from 'lodash'
import MenusTree from '../basic/menus/menus-tree.vue';
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {$menuUtils} from "@jzl/utils";
import {DFT_ICONS} from "@jzl/icons";

const props = defineProps({
  app: Object,
})

const currentData = ref(null)
const defaultMid = ref(null)
const route = useRoute()
const router = useRouter()

onMounted(() => {
  init();
})

const init = () => {
  defaultMid.value = route.query?.mid;
}

const handleSelectMenu = (data) => {
  if (!data || !data.content_id) {
    return;
  }
  currentData.value = data;

  let mid = _.get(data, "tid");

  if (mid) {
    router.push({
      name: 'portal-app-menu',
      params: {
        appId: props.app?.group_id
      },
      query: {
        mid
      },
      replace: true
    });
  }
}

const menuType = (type) => {
  if (type === 'NORMAL') {
    return "表单类";
  } else if (type === 'JZLPAGE') {
    return "页面类"
  } else if (type === 'CUSTOMPATH') {
    return "扩展/外链"
  } else if (type === 'CUSTOMNAME') {
    return "系统功能"
  } else {
    return "其他"
  }
}

const viewLabel = (view) => {
  return view?.view_name || '默认';
}

</script>
